<template>
	<view class="hj-bigbox">
		<view class="top-bar">
			<view class="kong"></view>
			<!-- 顶部的导航 -->
			<view class="top-bars">
				<!-- 返回按钮 -->
				<view class="return" @tap="getback()"></view>
				<view class="top-bar-name">黄金</view>
			</view>
			<!-- 当前持有（克）~~~~ -->
			<view class="hj-content">
				<view class="presentation">当前持有（克）</view>
				<!-- 需要动态生成这是黄金的克重 -->
				<view class="golds">{{have.totalShare||0}}</view>

				<view class="hint">
					<text>价值 <text class="hints">{{have.totalShare*375||0}}</text> 元</text>
					<!-- 无用 -->
					<view class="wuyong"></view>
				</view>
				<!-- 收益 -->
				<view class="earnings">
					<view class="e-1">
						<view class="e-1-1">昨日涨幅</view>
						<view class="e-1-2">{{have.totalIncome||0}}</view>
					</view>
					<view class="e-1">
						<view class="e-1-1">产品收益</view>
						<view class="e-1-2">{{have.productIncomeCount||0}}</view>
					</view>
					<view class="e-1">
						<view class="e-1-1">延迟收益（元）</view>
						<view class="e-1-2">{{have.waitIncomeCount||0}}</view>
					</view>
				</view>

				<!-- 卖出买入 -->
				<view class="anniu">
					<button type="default" class="an1" @tap="sale()" :data-id="'below'">卖出</button>
					<button type="default" class="an2" @tap="buy()">买入</button>
				</view>

				<view class="content-file">博时黄金
					<text style="color:#323232; padding-left:10rpx;padding-right:10rpx ;">357.0195</text>
					<text style="color: #9A9A9A;font-size: 24rpx;">[03-23]</text>
				</view>

			</view>
		</view>
		<view class="center-gg">
			<view class="ggimg">
				<image class="ggimg" src="@/static/image/hjggs.png" mode=""></image>
			</view>
			<view style="margin-left: 20rpx;">
				<view class="ggc">
					买入714元，预计03—26确认份额
				</view>
				<view class="ljck">
					立即查看
				</view>
			</view>

		</view>
		<!-- 玩转黄金 -->
		<view class="playgold">玩转黄金</view>
		<view class="advertising" v-for="item in advertising" :key="item._id">
			<image class="aimg" :src="item.img"></image>
			<view class="a-word">
				<text class="a-w-h1">{{item.h1}}</text>
				<text class="a-w-h2">{{item.h2}}</text>
				<view class="a-w-h3">
					<button type="default">金币直播</button>
					<text>{{item.time}}</text>
				</view>
			</view>
		</view>
		<!-- 买入 -->
		<pop ref="buy" :is_close="true" :biaoti="titlebuy" :is_mask="true" :width="100">
			<view class="salebox" v-for="item in goldname" :key="item.type" @tap="buyGold(item.type)">
				<text class="salebox-title" >{{item.typename}}</text>
				<!-- 这个是是否持有 -->
				<!-- <view class="salebox-hold">
					持有
				</view> -->
			</view>

		</pop>
		<!-- 卖出 -->
		<pop ref="sale" :is_close="true" :biaoti="titlesale" :is_mask="true" :width="100">
				<view class="salebox" v-if="have =='0'">
					您暂时并未持有黄金产品
				</view>
			<view class="salebox" else @tap="saleGold()" v-for="item in have.lists" :key="item.codeId">
				<text class="salebox-title">{{item.name}}</text>
				<view class="salebox-hold">
					持有
				</view>
			</view>

		</pop>
		<pop  ref="offons" :is_close="true" :biaoti="titlesale" :is_mask="true" :width="100">
			<view class="offons">
				
				<p>请登录后查看</p>
				<text @tap="logins">点击跳转登录</text>
			</view>
		</pop>
	</view>
</template>

<script>
	import pop from "@/components/ming-pop/ming-pop";

	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers("products")

	export default {
		components: {
			pop
		},
		data() {
			return {
				titlebuy: "选择买入的黄金",
				titlesale: "选择卖出的黄金",
				advertising: [{
						"img": "/static/image/hjgg.png",
						"h1": "黄金似乎远离了投资者的视线？",
						"h2": "技术面：金价正在筑底，甚至有望重返1800",
						"time": "2021年05月24日 14：24"
					},
					{
						"img": "/static/image/hjgg.png",
						"h1": "黄金似乎远离了投资者的视线？",
						"h2": "技术面：金价正在筑底，甚至有望重返1800",
						"time": "2021年05月24日 14：24"
					},
				],

			}
		},
		onLoad() {
			
		this.getgoldname()
		this.getgoldhave()
		},
		computed: {
			...mapState(["goldname","have"])
		},
		methods: {
			// 这个是左上角的那个返回箭头的方法
			getback() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 这个是卖出的模态框事件
			sale() {
				uni.getStorage({
					  key: 'userid',
					  success:(res)=> {
						  console.log(res)
						  if(res!=""){
							   	this.$refs.sale.show()
						  }
					  },
					  fail:(err)=> {
					  	this.$refs.offons.show()
					  }
				})
				
			},
			//这个是买入的模态框事件
			buy() {
				this.$refs.buy.show();
			},
			//买入黄金
			buyGold(ab) {
				console.log(ab)
				uni.navigateTo({
					url: "/pagesC/stock-detail/stock-detail?type=" + ab
				})
			},
			//卖出黄金
			saleGold() {
				uni.navigateTo({
					url: "/pagesC/t-goldSell/t-goldSell"
				})
			},
			logins(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
			...mapActions(["getgoldname","getgoldhave"])
			
		}
	}
</script>

<style scoped>
	.hj-bigbox {
		width: 750rpx;
		background: #F8F7F7;
		height: 100%vh;
	}

	.top-bar {
		width: 100%;
		height: 544rpx;
		text-align: center;
		color: white;
		font-weight: bold;
		margin-bottom: 430rpx;
		background: linear-gradient(180deg, #007AFF 0%, rgba(172, 209, 250, 0) 100%);
	}

	.kong {
		width: 100%;
		height: 99rpx;
	}

	.top-bars {
		width: 670rpx;
		height: 58rpx;
		/* border: 1rpx solid; */
		margin: 0 auto;
		display: flex;
		margin-bottom: 66rpx;
	}

	.return {
		width: 30rpx;
		height: 30rpx;
		border-top: 6rpx solid white;
		border-right: 6rpx solid white;
		transform: rotate(225deg);
		margin-top: 15rpx;
	}

	.top-bar-name {
		width: 610rpx;
		height: 58rpx;
		font-size: 40rpx;
		text-align: center;
		line-height: 58rpx;
	}

	.hj-content {
		padding-top: 48rpx;
		width: 670rpx;
		height: 704rpx;
		background: #FFFFFF;
		/* border: 1rpx solid red; */
		border-radius: 12rpx;
		margin: 0 auto;
		text-align: center;
	}

	.presentation {
		font-weight: 400;
		color: #474747;
		/* margin-top: 48rpx; */
		font-size: 32rpx;
		margin-bottom: 28rpx;
	}

	.golds {
		width: 670rpx;
		height: 90rpx;
		text-align: center;
		font-size: 72rpx;
		line-height: 86rpx;
		color: #2E2E2E;
		margin-bottom: 18rpx;
	}

	.hint {
		padding-left: 35rpx;
		padding-right: 35rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: inline-block;
		color: #474747;
		font-size: 32rpx;
		border-radius: 26rpx;
		background-color: #F0F0F0;
		position: relative;
		margin-bottom: 62rpx;
	}

	.hints {
		color: red;
		font-size: 40rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.wuyong {
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		background-color: #F0F0F0;
		top: -13rpx;
		left: 160rpx;
		transform: rotate(315deg);
		z-index: 0;
	}

	.earnings {
		width: 622rpx;
		height: 100rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.e-1 {
		width: 180rpx;
		height: 100rpx;
		text-align: center;
	}

	.e-1-1 {
		font-size: 24rpx;
		margin-bottom: 10rpx;
		color: #474747;
	}

	.e-1-2 {
		color: #FF3A3A;
		font-size: 40rpx;
	}

	.anniu {
		width: 670rpx;
		height: 92rpx;
		display: flex;
		margin-bottom: 48rpx;
	}

	.an1 {
		width: 288rpx;
		height: 92rpx;
		background: #F5F5F5;
		border-radius: 12rpx;
	}

	.an2 {
		width: 288rpx;
		height: 92rpx;
		background: #007AFF;
		border-radius: 12rpx;
		color: white;
	}

	.content-file {
		width: 622rpx;
		height: 90rpx;
		border-top: 1rpx solid #EFEFEF;
		margin: 0 auto;
		color: #9A9A9A;
		text-align: left;
		line-height: 90rpx;
		font-size: 32rpx;
	}

	.center-gg {
		width: 670rpx;
		height: 136rpx;
		border-radius: 12rpx;
		margin: 0 auto;
		background: #FFFFFF;
		padding: 24rpx;
		box-sizing: border-box;
		display: flex;
		margin-bottom: 48rpx;
	}

	.ggimg {
		width: 88rpx;
		height: 88rpx;
	}

	.ggc {}

	.ljck {
		font-size: 24rpx;
		line-height: 60rpx;
		color: #474747;
	}

	.playgold {
		width: 670rpx;
		margin: 0 auto;
		font-size: 32rpx;
		line-height: 34rpx;
		color: #161616;
		margin-bottom: 24rpx;
	}

	.advertising {
		width: 670rpx;
		height: 174rpx;
		background: #FFFFFF;
		margin: 0 auto;
		border-radius: 12rpx;
		box-sizing: border-box;
		padding: 24rpx;
		display: flex;
		margin-bottom: 18rpx;
	}

	.aimg {
		width: 136rpx;
		height: 124rpx;
		border: 1rpx dashed gray;
	}

	.a-word {
		width: 490rpx;
		height: 126rpx;

		margin-left: 20rpx;
	}

	.a-w-h1 {
		display: block;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #242424
	}

	.a-w-h2 {
		display: block;
		font-size: 20rpx;
		line-height: 50rpx;
		color: #686868;

	}

	.a-w-h3 {
		height: 36rpx;
		width: 490rpx;
		display: flex;
	}

	.a-w-h3 button {
		height: 36rpx;
		width: 112rpx;
		font-size: 15rpx;
		line-height: 35rpx;
		border-radius: 18rpx;
		color: #007AFF;
		border: 1rpx solid #007AFF;
		margin-left: 0;

	}

	.a-w-h3 text {
		font-size: 20rpx;
		font-weight: 300;
		line-height: 36rpx;
		color: #CBCBCB;
	}

	.salebox {
		display: flex;
		align-items: center;
		height: 68rpx;
		border-bottom: 1rpx solid #E6E6E6;
		margin-bottom: 24rpx;
	}

	.salebox-title {
		font-size: 32rpx;
		font-weight: 400;
		line-height: 44rpx;
		color: #474747;
	}

	.salebox-hold {
		text-align: center;
		width: 56rpx;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 20rpx;
		background-color: #A8CEF8;
		color: white;
		margin-left: 10rpx;
	}
	.offons{
		height: 500rpx;
		margin: 0 auto;
		font-size: 32rpx;
	}
</style>
